<template>
	<view>
		<uni-search-bar :radius="100" @confirm="search" v-model="searchData"></uni-search-bar>
	</
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots=true" :autoplay="autoplay" :interval="interval=2000"
			:duration="duration=500" >
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					<image style="width: 100%; height: 400rpx;" src="https://img.zcool.cn/community/01pgibfze7hxubegaiqlqq3837.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">
					<image style="width: 100%; height: 400rpx;" src="https://img.zcool.cn/community/01857358eb2ce1a8012049ef3e1c54.jpg@1280w_1l_2o_100sh.jpg"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">
					<image style="width: 100%; height: 400rpx;" src="https://ts1.cn.mm.bing.net/th/id/R-C.647092de7b043fd7b786fcd80b2d9d4d?rik=RRtn7i6RVSwguQ&riu=http%3a%2f%2fwww.xiaolucoffee.cn%2fuploads%2fimg1%2f20220714%2f62d029c34d0c7.jpg&ehk=Hepe3oGdzpNGA%2bLwndeb%2fwrDMavRW1CVbrIkN2PnOx4%3d&risl=&pid=ImgRaw&r=0"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="content">
		<view class="item" v-for="item in tableData">
			<image :src="item.img"  @click="doShowDetail(item.id)"></image>
			<view>
				<text>{{ item.name }}</text>
			</view>
			<view>
				${{ item.price }}
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	const tableData = ref([])

	const page = ref({
		pageNum: 1,
		pageSize: 4,
		maxPageNum: -1
	});

	const searchData = ref('');
	
	const doShowDetail =(id)=>{
		uni.navigateTo({
			url:`/pages/detail/detail?id=${id}`
		})
	}
	
	
	const search = () => {
		uni.request({
			url: `${API_HOST}/goods?name`, //仅为示例，并非真实接口地址。
			success: (res) => {
				const newTableData = res.data.filter((item) => {
					return item.name.includes(searchData.value)
				})
				tableData.value.length = 0;
				tableData.value.push(...newTableData)
				// tableData.value=[];
				// tableData.value.push(...newTableData)
			},
		});
	}



	const queryPage = () => {
		uni.request({
			url: `${API_HOST}/goods?_page=${page.value.pageNum}&_per_page=${page.value.pageSize}`, //仅为示例，并非真实接口地址。
			success: (res) => {
				tableData.value.push(...res.data.data);
				page.value.maxPageNum = res.data.pages
			},
		});
	}

	onMounted(() => {
		queryPage()
	})

	onPullDownRefresh(() => {
		page.value.pageNum = 1;
		queryPage()
		uni.stopPullDownRefresh(1000)
		uni.showToast({
			title: '到顶了',
			duration: 3000,
		});
	})
	onReachBottom(() => {
		if (page.value.pageNum < page.value.maxPageNum) {
			page.value.pageNum++;
			queryPage()
		}
		uni.showToast({
			title: '第' + page.value.pageNum + '页',
			duration: 2000
		})
	})


	// export default {
	// 	data() {
	// 		return {
	// 			title: 'Hello',
	// 			tableData:[]
	// 		}
	// 	},
	// onLoad() {
	// 	setTimeout(function () {
	// 				uni.stopPullDownRefresh();
	// 			}, 200);

	// this.querPage()
	// },
	// 	methods: {
	// 		querPage(){
	// 			uni.request({
	// 			    url: 'http://localhost:3000/goods', //仅为示例，并非真实接口地址。
	// 			    success: (res) => {
	// 					this.tableData=res.data
	// 			    }
	// 			});
	// 		}
	// 	}
	// }
</script>

<style>
	.content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item {
		width: 330rpx;
		height: 600rpx;
		background-color: white;
		margin: 20rpx;
	}

	.item image {
		width: 100%;
		height: 500rpx;
	}
</style>